<template>
  <div class="sidebar">
    <el-menu
      :default-active="activeMenu"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      router
      :collapse="isCollapse">
      <el-menu-item index="/dataCenter">
        <i class="iconfont wow-icon-shujuzhongxinicon"></i>
        <span slot="title">数据中心</span>
      </el-menu-item>
      <el-submenu index='1'>
        <template slot="title">
          <i class="iconfont wow-icon-chuangjianCRFbiaodanicon"></i>
          <span slot="title">创建表单</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/creatCrf">自定义表单</el-menu-item>
          <el-menu-item index="/myform">我的表单</el-menu-item>
          <el-menu-item index="/systemForm">系统模版表单</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
export default {
  name: 'Sidebar',
  data () {
    return {
      isCollapse: false,
      activeMenu: this.$route.path
    }
  },
  watch: {
    $route (val) {
      const arr = val.path.split('/')
      if (arr[1] === 'myTopic') {
        this.activeMenu = '/myTopic/topicList'
      } else if (arr[1] === 'dataCenter') {
        this.activeMenu = '/dataCenter'
      } else if (arr[1] === 'topicCenter') {
        this.activeMenu = '/topicCenter'
      } else if (arr[1] === 'creatCrf') {
        this.activeMenu = '/creatCrf'
      } else if (arr[1] === 'myform') {
        this.activeMenu = '/myform'
      } else if (arr[1] === '/systemForm') {
        this.activeMenu = '/systemForm'
      }
    }
  },
  methods: {
    handleOpen () {

    },
    handleClose () {

    }
  },
  mounted () {

  }
}
</script>
<style lang="scss">
.sidebar{
  // transition: width 0.28s;
  width: 180px;
  height: 100%;
  // position: fixed;
  font-size: 0px;
  top: 60px;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;
  .el-menu{
    height: 100%;
    .el-menu-item{
      span{
        margin-left: 6px;
      }
    }
  }
  .icon-shujuzhongxinicon,.icon-wodeketiicon,.icon-ketizhongxinicon,.icon-chuangjianCRFbiaodanicon{
    color: #333333;
  }
}
</style>
